<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的随说</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="zhz">
    <meta name="time" content="2022/3/23">
    <link href="/static/img/favicon.ico" rel="shortcut icon">
    <link href="../../static/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/my/common/default.css" rel="stylesheet">
    <link href="../../static/css/my/myCasualWord.css" rel="stylesheet">
    <link href="../../static/css/my/common/header.css" rel="stylesheet">
    <link href="../../static/css/my/common/modal.css" rel="stylesheet">
</head>
<body>

<div class="myContainer">
    <div th:replace="~{common/header}"></div>
    <main id="main" class="w-100 d-flex justify-content-center align-items-center">
        <div class="sidebar d-flex justify-content-center align-items-center">
            <ul class="nav nav-pills flex-column text-center">
                <li class="nav-item"><a class="nav-link" href="/myProfile">我的资料</a></li>
                <li class="nav-item"><a class="nav-link active" href="">我的随说</a></li>
                <li class="nav-item"><a class="nav-link" href="/myQAndA">我的问答</a></li>
            </ul>
        </div>
        <div class="myCasualWord overflow-auto">
            <div th:each="casualWord:${casualWords}" class="aCasualWord"><!--遍历输出-->
                <div class="head d-flex align-items-center">
                    <img th:src="${headPortrait}" class="rounded-circle" alt="" width="35" height="35">
                    <span th:text="${name}"></span>
                    <span th:text="${casualWord.getLongValue('time')}" class="time" style="margin-left: auto"></span>
                </div>
                <div class="mainContent">
                    <span th:text="${casualWord.getString('text')}" class="d-flex"></span>
                    <img th:if="${casualWord.getString('image')} != null" th:src="${casualWord.getString('image')}"
                         alt="">
                    <video controls th:if="${casualWord.getString('video')} != null"
                           th:src="${casualWord.getString('video')}" type="video/mp4">
                    </video>
                </div>
                <div class="footer d-flex justify-content-end">
                    <input type="hidden" th:value="${casualWord.getIntValue('casualWordId')}">
                    <input type="hidden" value="0">
                    <img th:if="!${casualWord.getBoolean('isLike')}" onclick="unlikeOrLike(this)" title="点赞" alt=""
                         src="../../static/img/unlike.svg" height="20" width="20">
                    <img th:if="${casualWord.getBoolean('isLike')}" onclick="unlikeOrLike(this)" title="取消点赞" alt=""
                         src="../../static/img/like.svg" height="20" width="20">
                    <img onclick="showCommentModal(this)" src="../../static/img/comment.svg" title="评论"
                         alt="" height="20" width="20">
                    <img onclick="moreInfoOfThisCasualWord(this)" src="../../static/img/loadMore.svg" title="查看详情"
                         alt="" height="20" width="20">
                </div>
            </div>
            <div id="pagination" class="pagination pagination-sm d-flex justify-content-center align-items-center">
                <input th:value="${totalPages}" id="totalPages" type="hidden"><!--总页数、当前页、当前请求路径-->
                <input th:value="${currentPage}" id="currentPage" type="hidden">
                <input th:value="${currentPath}" id="currentPath" type="hidden">
            </div>
        </div>
    </main>
</div>

<div th:replace="~{common/modal::noticeModal}"></div>
<div th:replace="~{common/modal::publishCommentOrAnswerModal}"></div>
<script src="../../static/js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../../static/js/jquery/jquery-3.6.0.min.js"></script>
<script src="../../static/plugins/jq-paginator/jq-paginator.min.js"></script>
<script src="../../static/js/my/common/noticeModal.js"></script>
<script src="../../static/js/my/common/formatTimeStamp.js"></script>
<script src="../../static/js/my/common/publishCommentOrAnswerModal.js"></script>
<script src="../../static/js/my/common/casualWord.js"></script>
<script src="../../static/js/other/background.js"></script>
<script src="../../static/js/my/common/pagination.js"></script>
</body>
</html>